<template>
	<div class="box" id="myChart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import echarts from "@/common/utils/echarts.js";
import 'echarts/lib/component/dataZoom';
const props = defineProps({
	data: {
		type: Array,
		default: () => [],
	},
});
const myChart = ref(null);

let xData = props.data.map((v) => v.projectName); // 类型
var data1Arr = props.data.map((v) => v.realSchedule); // 数据1 实际进度
var data2Arr = props.data.map((v) => v.planSchedule); // 数据2 计划进度

var dataName = ["实际进度", "计划进度"];
let zoomShow = xData.length > 10;

let dataList = [data1Arr, data2Arr];
let colorList = [
	{
		type: "linear",
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: "#EACAA7",
			},
			{
				offset: 1,
				color: "#EACAA7",
			},
		],
	},
	{
		type: "linear",
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: "#9797B4",
			},
			{
				offset: 1,
				color: "#9797B4",
			},
		],
	},
];

let seriousList = [];
dataName.map((item, index) => {
	seriousList.push({
		name: dataName[index],
		label: {
			normal: {
				show: true,
				fontSize: 13,
				color: "#7D7D9A",
				position: "top",
			},
		},
		color: colorList[index],
		itemStyle: {
			barBorderRadius: [2, 2, 0, 0],
		},
		type: "bar",
		barWidth: "15", //柱型宽度
		data: dataList[index],
	});
});

let option = {
	tooltip: {
		trigger: "axis",
		formatter: function (params) {
			let str = params[0].name + "<br>";
			params.forEach((item, index) => {
				str += item.marker + item.seriesName + "：" + item.value + "%<br>";
			});
			return str;
		},
		axisPointer: {
			type: "none",
		},
		textStyle: {
			fontSize: 12,
			color: "rgba(212, 232, 254, 1)",
		},
	},
	dataZoom: [
		{
			show: zoomShow, //flase直接隐藏图形
			type: "slider",
			backgroundColor: "transparent",
			brushSelect: false, // 是否开启刷选功能
			zoomLock: false, // 是否锁定选择区域大小
			height: 7,
			//left: 'center', //滚动条靠左侧的百分比
			bottom: 0,
			startValue: 0, //滚动条的起始位置
			endValue: 8, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
			handleStyle: {
				color: "#E8E8E8",
				borderColor: "#E8E8E8",
			},
			fillerColor: "#E8E8E8",
			borderColor: "transparent",
			showDetail: false,
			dataBackground: {
				areaStyle: {
					opacity: 0,
				},
				lineStyle: {
					color: "transparent",
				},
			},
		},
	],
	legend: {
		data: dataName,
		right: "35%",
		top: "0",
		//icon: "circle",
		itemWidth: 24, // 设置宽度
		itemHeight: 14, // 设置高度
		itemGap: 24,
		textStyle: {
			color: "rgba(0, 0, 0, 0.85)",
			fontFamily: "Source Han Sans CN-Regular",
			fontSize: 12,
			padding: [0, 0, 0, 5],
		},
	},
	grid: {
		left: "10",
		right: "10",
		top: "40",
		bottom: "10", //下边距,
		containLabel: true,
	},
	xAxis: [
		{
			type: "category",
			axisLine: {
				show: true,
				lineStyle: {
					color: "#cccccc",
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: "#808080",
				textStyle: {
					fontSize: 12,
					fontFamily: "Source Han Sans CN-Regular",
				},
			},
			data: xData,
		},
	],
	yAxis: [
		{
			//name: '单位：人',
			nameTextStyle: {
				color: "#808080",
				fontSize: 12,
				fontFamily: "Source Han Sans CN-Regular",
				align: "left",
				padding: [0, 0, -5, 0],
			},
			type: "value",
			splitLine: {
				//y轴网格线
				lineStyle: {
					color: "rgba(0, 0, 0, 0.1)",
					type: "dashed",
				},
			},
			axisLabel: {
				//y轴文本
				//showMinLabel: false, //y轴是否设置最小刻度0
				color: "#808080",
				textStyle: {
					fontSize: 12,
					fontFamily: "Source Han Sans CN-Regular",
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				//y轴线
				show: false,
				lineStyle: {
					color: "#D1D1D1",
				},
			},
		},
	],
	series: seriousList,
};

const init = () => {
	myChart.value = echarts.init(document.getElementById("myChart"));
	myChart.value.setOption(option);
};
onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped>
.box {
	width: 100%;
	height: 500px;
}
</style>
